<template>
	<div style="position: relative">
		<div :style="{ height: parseInt(setSize.imgHeight) + vSpace + 'px' }" class="verify-img-out">
			<div :style="{ width: setSize.imgWidth, height: setSize.imgHeight }" class="verify-img-panel">
				<img :src="'data:image/png;base64,' + backImgBase" alt="" style="width: 100%; height: 100%; display: block" />
				<div v-show="showRefresh" class="verify-refresh" @click="refresh"><i class="iconfont icon-refresh"></i></div>
				<transition name="tips">
					<span v-if="tipWords" :class="passFlag ? 'suc-bg' : 'err-bg'" class="verify-tips">{{ tipWords }}</span>
				</transition>
			</div>
		</div>
		<!-- 公共部分 -->
		<div :style="{ width: setSize.imgWidth, height: barSize.height, 'line-height': barSize.height }" class="verify-bar-area">
			<span class="verify-msg" v-text="text"></span>
			<div
				:style="{
					width: leftBarWidth !== undefined ? leftBarWidth : barSize.height,
					height: barSize.height,
					'border-color': leftBarBorderColor,
					transition: transitionWidth,
				}"
				class="verify-left-bar"
			>
				<span class="verify-msg" v-text="finishText"></span>
				<div
					:style="{
						width: barSize.height,
						height: barSize.height,
						'background-color': moveBlockBackgroundColor,
						left: moveBlockLeft,
						transition: transitionLeft,
					}"
					class="verify-move-block"
					@mousedown="start"
					@touchstart="start"
				>
					<i :class="['verify-icon iconfont', iconClass]" :style="{ color: iconColor }"></i>
					<div
						v-if="type === '2'"
						:style="{
							width: Math.floor((parseInt(setSize.imgWidth) * 47) / 310) + 'px',
							height: setSize.imgHeight,
							top: '-' + (parseInt(setSize.imgHeight) + vSpace) + 'px',
							'background-size': parseInt(setSize.imgWidth) + ' ' + parseInt(setSize.imgHeight) + 'px',
						}"
						class="verify-sub-block"
					>
						<img
							:src="'data:image/png;base64,' + blockBackImgBase"
							alt=""
							style="width: 100%; height: 100%; display: block; -webkit-user-drag: none"
						/>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
/**
 * VerifySlide
 * @description 滑块
 * */
import { aesEncrypt } from '../utils/ase';
import { resetSize } from '../utils/util';
import { reqCheck, reqGet } from '../api/index';
import { computed, nextTick, onMounted, reactive, ref, toRefs, watch, getCurrentInstance } from 'vue';
// import useCurrentInstance from '@/utils/useCurrentInstance';

export interface PropsType {
	captchaType: string;
	type: string;
	//弹出式pop，固定fixed
	mode: string;
	vSpace: number;
	explain: string;
	imgSize: Record<string, any>;
	blockSize: Record<string, any>;
	barSize: Record<string, any>;
}
const props = withDefaults(defineProps<PropsType>(), {
	captchaType: '',
	type: '1',
	//弹出式pop，固定fixed
	mode: 'fixed',
	vSpace: 5,
	explain: ' 向右滑动完成验证',
	imgSize: () => {
		return {
			width: '310px',
			height: '155px',
		};
	},
	blockSize: () => {
		return {
			width: 50,
			height: 50,
		};
	},
	barSize: () => {
		return {
			width: '310px',
			height: '40px',
		};
	},
});

const { mode, captchaType, type, blockSize, explain } = toRefs(props);
const instance = getCurrentInstance();
const proxy = instance!.proxy;
console.log('props---', props);

// const { proxy } = useCurrentInstance();
let secretKey = ref(''), //后端返回的ase加密秘钥
	passFlag = ref(false), //是否通过的标识
	backImgBase = ref(''), //验证码背景图片
	blockBackImgBase = ref(''), //验证滑块的背景图片
	backToken = ref(''), //后端返回的唯一token值
	startMoveTime = ref(), //移动开始的时间
	endMovetime = ref(), //移动结束的时间
	// tipsBackColor = ref(''), //提示词的背景颜色
	tipWords = ref(''),
	text = ref(''),
	finishText = ref(''),
	setSize = reactive({
		imgHeight: '0',
		imgWidth: '0',
		barHeight: '0',
		barWidth: '0',
	}),
	top = ref(0),
	left = ref(0),
	moveBlockLeft = ref(),
	leftBarWidth = ref(),
	// 移动中样式
	moveBlockBackgroundColor = ref(''),
	leftBarBorderColor = ref('#ddd'),
	iconColor = ref(''),
	iconClass = ref('icon-right'),
	status = ref(false), //鼠标状态
	isEnd = ref(false), //是够验证完成
	showRefresh = ref(true),
	transitionLeft = ref(''),
	transitionWidth = ref(''),
	startLeft = ref(0);

const barArea = computed(() => {
	return proxy!.$el.querySelector('.verify-bar-area');
});

function init() {
	text.value = explain.value;
	getPictrue();
	nextTick(() => {
		console.log('porps', props.barSize);
		console.log('proxy', proxy);
		let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy);

		setSize.imgHeight = imgHeight;
		setSize.imgWidth = imgWidth;
		setSize.barHeight = barHeight;
		setSize.barWidth = barWidth;
		proxy!.$parent?.$emit('ready', proxy);
	});

	window.removeEventListener('touchmove', function (e) {
		move(e);
	});
	window.removeEventListener('mousemove', function (e) {
		move(e);
	});

	//鼠标松开
	window.removeEventListener('touchend', function () {
		end();
	});
	window.removeEventListener('mouseup', function () {
		end();
	});

	window.addEventListener('touchmove', function (e) {
		move(e);
	});
	window.addEventListener('mousemove', function (e) {
		move(e);
	});

	//鼠标松开
	window.addEventListener('touchend', function () {
		end();
	});
	window.addEventListener('mouseup', function () {
		end();
	});
}

watch(type, () => {
	// init();
});
onMounted(() => {
	// 禁止拖拽
	init();
	// proxy.$el.onselectstart = function () {
	// 	return false;
	// };
});

//鼠标按下
function start(e: any) {
	e = e || window.event;
	let x = null;
	if (!e.touches) {
		//兼容PC端
		x = e.clientX;
	} else {
		//兼容移动端
		x = e.touches[0].pageX;
	}
	startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left);
	startMoveTime.value = +new Date(); //开始滑动的时间
	if (isEnd.value === false) {
		text.value = '';
		moveBlockBackgroundColor.value = '#337ab7';
		leftBarBorderColor.value = '#337AB7';
		iconColor.value = '#fff';
		e.stopPropagation();
		status.value = true;
	}
}

//鼠标移动
function move(e: any) {
	e = e || window.event;
	if (status.value && isEnd.value === false) {
		let x = null;
		if (!e.touches) {
			//兼容PC端
			x = e.clientX;
		} else {
			//兼容移动端
			x = e.touches[0].pageX;
		}
		// parsein
		const bar_area_left = barArea.value.getBoundingClientRect().left;
		let move_block_left = x - bar_area_left; //小方块相对于父元素的left值
		if (move_block_left >= barArea.value.offsetWidth - Math.floor(blockSize.value.width / 2) - 2) {
			move_block_left = barArea.value.offsetWidth - Math.floor(blockSize.value.width / 2) - 2;
		}
		if (move_block_left <= 0) {
			move_block_left = Math.floor(parseInt(blockSize.value.width) / 2);
		}
		//拖动后小方块的left值
		moveBlockLeft.value = move_block_left - startLeft.value + 'px';
		leftBarWidth.value = move_block_left - startLeft.value + 'px';
	}
}

//鼠标松开
function end() {
	endMovetime.value = +new Date();
	//判断是否重合
	if (status.value && isEnd.value === false) {
		let moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''));
		moveLeftDistance = (moveLeftDistance * 310) / Math.floor(parseInt(setSize.imgWidth));
		let data = {
			captchaType: captchaType.value,
			pointJson: secretKey.value
				? aesEncrypt(
						JSON.stringify({
							x: moveLeftDistance,
							y: 5.0,
						}),
						secretKey.value
				  )
				: JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
			token: backToken.value,
		};
		reqCheck(data).then((response) => {
			let res = response.data;
			if (res.repCode === '0000') {
				moveBlockBackgroundColor.value = '#5cb85c';
				leftBarBorderColor.value = '#5cb85c';
				iconColor.value = '#fff';
				iconClass.value = 'icon-check';
				showRefresh.value = false;
				isEnd.value = true;
				if (mode.value === 'pop') {
					setTimeout(() => {
						(proxy!.$parent as any).clickShow = false;
						refresh();
					}, 1500);
				}
				passFlag.value = true;
				tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s验证成功`;
				const captchaVerification = secretKey.value
					? aesEncrypt(
							backToken.value +
								'---' +
								JSON.stringify({
									x: moveLeftDistance,
									y: 5.0,
								}),
							secretKey.value
					  )
					: backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 });
				setTimeout(() => {
					tipWords.value = '';
					(proxy?.$parent!.$parent as any).closeBox();
					(proxy?.$parent!.$parent as any).$emit('success', { captchaVerification });
				}, 1000);
			} else {
				moveBlockBackgroundColor.value = '#d9534f';
				leftBarBorderColor.value = '#d9534f';
				iconColor.value = '#fff';
				iconClass.value = 'icon-close';
				passFlag.value = false;
				setTimeout(function () {
					refresh();
				}, 1000);
				(proxy?.$parent as any).$emit('error', proxy);
				tipWords.value = '验证失败';
				setTimeout(() => {
					tipWords.value = '';
				}, 1000);
			}
		});
		status.value = false;
	}
}

const refresh = () => {
	showRefresh.value = true;
	finishText.value = '';

	transitionLeft.value = 'left .3s';
	moveBlockLeft.value = 0;

	leftBarWidth.value = undefined;
	transitionWidth.value = 'width .3s';

	leftBarBorderColor.value = '#ddd';
	moveBlockBackgroundColor.value = '#fff';
	iconColor.value = '#000';
	iconClass.value = 'icon-right';
	isEnd.value = false;

	getPictrue();
	setTimeout(() => {
		transitionWidth.value = '';
		transitionLeft.value = '';
		text.value = explain.value;
	}, 300);
};

// 请求背景图片和验证图片
function getPictrue() {
	let data = {
		captchaType: captchaType.value,
	};
	reqGet(data).then((response) => {
		let res = response.data;
		if (res.repCode === '0000') {
			backImgBase.value = res.repData.originalImageBase64;
			blockBackImgBase.value = res.repData.jigsawImageBase64;
			backToken.value = res.repData.token;
			secretKey.value = res.repData.secretKey;
		} else {
			tipWords.value = res.repMsg;
		}
	});
}

// export default {
// 	name: 'VerifySlide',
// 	props: {
// 		captchaType: {
// 			type: String,
// 			default: '',
// 		},
// 		type: {
// 			type: String,
// 			default: '1',
// 		},
// 		//弹出式pop，固定fixed
// 		mode: {
// 			type: String,
// 			default: 'fixed',
// 		},
// 		vSpace: {
// 			type: Number,
// 			default: 5,
// 		},
// 		explain: {
// 			type: String,
// 			default: '向右滑动完成验证',
// 		},
// 		imgSize: {
// 			type: Object,
// 			default() {
// 				return {
// 					width: '310px',
// 					height: '155px',
// 				};
// 			},
// 		},
// 		blockSize: {
// 			type: Object,
// 			default: () => ({ width: 50, height: 50 }),
// 		},
// 		barSize: {
// 			type: Object,
// 			default: () => ({ width: '310px', height: '40px' }),
// 		},
// 	},
// 	setup(props) {
// 		const { mode, captchaType, type, blockSize, explain } = toRefs(props);
// 		const { proxy } = getCurrentInstance();
// 		let secretKey = ref(''), //后端返回的ase加密秘钥
// 			passFlag = ref(false), //是否通过的标识
// 			backImgBase = ref(''), //验证码背景图片
// 			blockBackImgBase = ref(''), //验证滑块的背景图片
// 			backToken = ref(''), //后端返回的唯一token值
// 			startMoveTime = ref(), //移动开始的时间
// 			endMovetime = ref(), //移动结束的时间
// 			tipsBackColor = ref(''), //提示词的背景颜色
// 			tipWords = ref(''),
// 			text = ref(''),
// 			finishText = ref(''),
// 			setSize = reactive({
// 				imgHeight: 0,
// 				imgWidth: 0,
// 				barHeight: 0,
// 				barWidth: 0,
// 			}),
// 			top = ref(0),
// 			left = ref(0),
// 			moveBlockLeft = ref(),
// 			leftBarWidth = ref(),
// 			// 移动中样式
// 			moveBlockBackgroundColor = ref(''),
// 			leftBarBorderColor = ref('#ddd'),
// 			iconColor = ref(''),
// 			iconClass = ref('icon-right'),
// 			status = ref(false), //鼠标状态
// 			isEnd = ref(false), //是够验证完成
// 			showRefresh = ref(true),
// 			transitionLeft = ref(''),
// 			transitionWidth = ref(''),
// 			startLeft = ref(0);

// 		const barArea = computed(() => {
// 			return proxy.$el.querySelector('.verify-bar-area');
// 		});

// 		function init() {
// 			text.value = explain.value;
// 			getPictrue();
// 			nextTick(() => {
// 				console.log('porps', props.barSize);
// 				console.log('proxy', proxy);
// 				let { imgHeight, imgWidth, barHeight, barWidth } = resetSize(proxy);

// 				setSize.imgHeight = imgHeight;
// 				setSize.imgWidth = imgWidth;
// 				setSize.barHeight = barHeight;
// 				setSize.barWidth = barWidth;
// 				proxy.$parent.$emit('ready', proxy);
// 			});

// 			window.removeEventListener('touchmove', function (e) {
// 				move(e);
// 			});
// 			window.removeEventListener('mousemove', function (e) {
// 				move(e);
// 			});

// 			//鼠标松开
// 			window.removeEventListener('touchend', function () {
// 				end();
// 			});
// 			window.removeEventListener('mouseup', function () {
// 				end();
// 			});

// 			window.addEventListener('touchmove', function (e) {
// 				move(e);
// 			});
// 			window.addEventListener('mousemove', function (e) {
// 				move(e);
// 			});

// 			//鼠标松开
// 			window.addEventListener('touchend', function () {
// 				end();
// 			});
// 			window.addEventListener('mouseup', function () {
// 				end();
// 			});
// 		}

// 		watch(type, () => {
// 			init();
// 		});
// 		onMounted(() => {
// 			// 禁止拖拽
// 			init();
// 			proxy.$el.onselectstart = function () {
// 				return false;
// 			};
// 		});

// 		//鼠标按下
// 		function start(e) {
// 			e = e || window.event;
// 			let x = null;
// 			if (!e.touches) {
// 				//兼容PC端
// 				x = e.clientX;
// 			} else {
// 				//兼容移动端
// 				x = e.touches[0].pageX;
// 			}
// 			startLeft.value = Math.floor(x - barArea.value.getBoundingClientRect().left);
// 			startMoveTime.value = +new Date(); //开始滑动的时间
// 			if (isEnd.value === false) {
// 				text.value = '';
// 				moveBlockBackgroundColor.value = '#337ab7';
// 				leftBarBorderColor.value = '#337AB7';
// 				iconColor.value = '#fff';
// 				e.stopPropagation();
// 				status.value = true;
// 			}
// 		}

// 		//鼠标移动
// 		function move(e) {
// 			e = e || window.event;
// 			if (status.value && isEnd.value === false) {
// 				let x = null;
// 				if (!e.touches) {
// 					//兼容PC端
// 					x = e.clientX;
// 				} else {
// 					//兼容移动端
// 					x = e.touches[0].pageX;
// 				}
// 				// parsein
// 				const bar_area_left = barArea.value.getBoundingClientRect().left;
// 				let move_block_left = x - bar_area_left; //小方块相对于父元素的left值
// 				if (move_block_left >= barArea.value.offsetWidth - Math.floor(parseInt(blockSize.value.width) / 2) - 2) {
// 					move_block_left = barArea.value.offsetWidth - Math.floor(parseInt(blockSize.value.width) / 2) - 2;
// 				}
// 				if (move_block_left <= 0) {
// 					move_block_left = Math.floor(parseInt(blockSize.value.width) / 2);
// 				}
// 				//拖动后小方块的left值
// 				moveBlockLeft.value = move_block_left - startLeft.value + 'px';
// 				leftBarWidth.value = move_block_left - startLeft.value + 'px';
// 			}
// 		}

// 		//鼠标松开
// 		function end() {
// 			endMovetime.value = +new Date();
// 			//判断是否重合
// 			if (status.value && isEnd.value === false) {
// 				let moveLeftDistance = parseInt((moveBlockLeft.value || '').replace('px', ''));
// 				moveLeftDistance = (moveLeftDistance * 310) / Math.floor(setSize.imgWidth);
// 				let data = {
// 					captchaType: captchaType.value,
// 					pointJson: secretKey.value
// 						? aesEncrypt(
// 								JSON.stringify({
// 									x: moveLeftDistance,
// 									y: 5.0,
// 								}),
// 								secretKey.value
// 						  )
// 						: JSON.stringify({ x: moveLeftDistance, y: 5.0 }),
// 					token: backToken.value,
// 				};
// 				reqCheck(data).then((response) => {
// 					let res = response.data;
// 					if (res.repCode === '0000') {
// 						moveBlockBackgroundColor.value = '#5cb85c';
// 						leftBarBorderColor.value = '#5cb85c';
// 						iconColor.value = '#fff';
// 						iconClass.value = 'icon-check';
// 						showRefresh.value = false;
// 						isEnd.value = true;
// 						if (mode.value === 'pop') {
// 							setTimeout(() => {
// 								proxy.$parent.clickShow = false;
// 								refresh();
// 							}, 1500);
// 						}
// 						passFlag.value = true;
// 						tipWords.value = `${((endMovetime.value - startMoveTime.value) / 1000).toFixed(2)}s验证成功`;
// 						const captchaVerification = secretKey.value
// 							? aesEncrypt(
// 									backToken.value +
// 										'---' +
// 										JSON.stringify({
// 											x: moveLeftDistance,
// 											y: 5.0,
// 										}),
// 									secretKey.value
// 							  )
// 							: backToken.value + '---' + JSON.stringify({ x: moveLeftDistance, y: 5.0 });
// 						setTimeout(() => {
// 							tipWords.value = '';
// 							proxy.$parent.$parent.closeBox();
// 							proxy.$parent.$parent.$emit('success', { captchaVerification });
// 						}, 1000);
// 					} else {
// 						moveBlockBackgroundColor.value = '#d9534f';
// 						leftBarBorderColor.value = '#d9534f';
// 						iconColor.value = '#fff';
// 						iconClass.value = 'icon-close';
// 						passFlag.value = false;
// 						setTimeout(function () {
// 							refresh();
// 						}, 1000);
// 						proxy.$parent.$emit('error', proxy);
// 						tipWords.value = '验证失败';
// 						setTimeout(() => {
// 							tipWords.value = '';
// 						}, 1000);
// 					}
// 				});
// 				status.value = false;
// 			}
// 		}

// 		const refresh = () => {
// 			showRefresh.value = true;
// 			finishText.value = '';

// 			transitionLeft.value = 'left .3s';
// 			moveBlockLeft.value = 0;

// 			leftBarWidth.value = undefined;
// 			transitionWidth.value = 'width .3s';

// 			leftBarBorderColor.value = '#ddd';
// 			moveBlockBackgroundColor.value = '#fff';
// 			iconColor.value = '#000';
// 			iconClass.value = 'icon-right';
// 			isEnd.value = false;

// 			getPictrue();
// 			setTimeout(() => {
// 				transitionWidth.value = '';
// 				transitionLeft.value = '';
// 				text.value = explain.value;
// 			}, 300);
// 		};

// 		// 请求背景图片和验证图片
// 		function getPictrue() {
// 			let data = {
// 				captchaType: captchaType.value,
// 			};
// 			reqGet(data).then((response) => {
// 				let res = response.data;
// 				if (res.repCode === '0000') {
// 					backImgBase.value = res.repData.originalImageBase64;
// 					blockBackImgBase.value = res.repData.jigsawImageBase64;
// 					backToken.value = res.repData.token;
// 					secretKey.value = res.repData.secretKey;
// 				} else {
// 					tipWords.value = res.repMsg;
// 				}
// 			});
// 		}

// 		return {
// 			secretKey, //后端返回的ase加密秘钥
// 			passFlag, //是否通过的标识
// 			backImgBase, //验证码背景图片
// 			blockBackImgBase, //验证滑块的背景图片
// 			backToken, //后端返回的唯一token值
// 			startMoveTime, //移动开始的时间
// 			endMovetime, //移动结束的时间
// 			tipsBackColor, //提示词的背景颜色
// 			tipWords,
// 			text,
// 			finishText,
// 			setSize,
// 			top,
// 			left,
// 			moveBlockLeft,
// 			leftBarWidth,
// 			// 移动中样式
// 			moveBlockBackgroundColor,
// 			leftBarBorderColor,
// 			iconColor,
// 			iconClass,
// 			status, //鼠标状态
// 			isEnd, //是够验证完成
// 			showRefresh,
// 			transitionLeft,
// 			transitionWidth,
// 			barArea,
// 			refresh,
// 			start,
// 		};
// 	},
// };
</script>
<style>
body {
	transaction: 1;
}
</style>
